import React from 'react';

class CtrlUpdate extends React.Component {

    state = {
       msg: 'hello'
    };

    changeMsg = () => {
        this.setState({
            msg: 'hello'
        },() => {
            console.log('已更改后的数据:',this.state.msg);
        });
    }
    
    render() { 
        return (
            <>
              <h2>{this.state.msg}</h2>
              <button onClick={ this.changeMsg }>更新数据</button>
            </>
        );
    }
    
    // 该生命周期函数决定数据变化时组件是否要更新(渲染)
    // nextProps代表更新后的props
    // nextState代表更新后的state
    shouldComponentUpdate(nextProps, nextState){
        // 返回true时允许更新，反之，则禁止更新

        // console.log('原值：', this.state.msg);
        // console.log('修改后值：', nextState.msg);
        // if(this.state.msg === nextState.msg){
        //     // 修改值相同则不更新组件
        //     console.log('不更新');
        //     return false
        // }else{
        //     console.log('更新');
        //     return true;
        // }
        return this.state.msg !== nextState.msg;
    }
}
 
export default CtrlUpdate;